<template>
	<div class="list-item">
		<!-- <div class="title">{{title}}</div>
		<div class="author">{{author}}</div>
		<div class="desc">{{desc}}</div>
		<div class="count">{{count + 1}}</div>	 -->

			<div class="title">{{info.title}}</div>
			<div class="author">{{info.author}}</div>
			<div class="desc">{{info.desc}}</div>
			<div class="count">{{info.count + 1}}</div>	
	</div>
</template>

<script>
	export default {
		name:'list-item',
		// 定义接收props方式一（开发常用）:
		// props:['title','author','desc','count'],
		
		// 定义接收props方式二：限制传递的参数类型
		// props:{
		// 	title:String,
		// 	author:String,
		// 	desc:String,
		// 	count:Number
		// },
		
		// 定义接收props方式三，限制传递的参数类型 + 传入需求必要性 + 默认值定义
		// props:{
		// 	title:{
		// 		type:String,
		// 		required:true
		// 	},
		// 	author:{
		// 		type:String,
		// 		default:'未命名'
		// 	},
		// 	desc:{
		// 		type:String,
		// 		default:'用户很懒没有留下任何痕迹'
		// 	},
		// 	count:{
		// 		type:Number,
		// 		default:0
		// 	}
		// },
		//注意传入的props是只能读，不能修改的
		
		//接收传入对象
		props:{
			info:Object
		},
		
		data(){
			return {
				
			}
		}
		
		//思考：能不能修改props传入的数据
	}
</script>

<style scoped>
	.list-item{
		width: 200px;
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: 5px;
		border: 1px solid #cccccc;
	}
	.title{
		color: #1a1a1a;
		font-size: 18px;
	}
	.author,.desc{
		color: #cccccc;
	}
</style>